<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.6/semantic.min.css"/>
    <link rel="stylesheet" type="text/css" href="../static/css/main.css"/>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.6/semantic.min.js"></script>
</head>
<body id="example" class="progress">
<div class="segment">
    <div class="container">
        <div class="introduction"><h1 class="ui dividing header"> 基础组件 &nbsp;<a class="ui label large red" target="_blank" href="http://bbs.icoolxue.com/forum.php?mod=forumdisplay&amp;fid=48">Semantic UI交流论坛</a>&nbsp;<a class="ui red label large">Semantic UI学习交流群：277950553</a></h1>

            <p>基础组件是创建Web站点的基础控件，基本上所有的网站都会用到。</p></div>
    </div>
</div>
<div class="ui dropdown"><input name="gender" type="hidden"> <i class="dropdown icon"></i>

    <div class="default text">Gender</div>
    <div class="menu">
        <div class="item" data-value="male">Male</div>
        <div class="item" data-value="female">Female</div>
    </div>
</div>
<div class="main container"><h2>基础组建的包含：</h2>

    <div class="ui two type stackable items">
        <div class="item">
            <div class="image">
                <div class="ui teal icon labled button"><i class="user icon"></i> 关注</div>
                <br/> <br/>

                <div class="ui purple icon buttons">
                    <div class="ui button"><i class="icon user"></i></div>
                    <div class="ui button"><i class="icon setting"></i></div>
                    <div class="ui button"><i class="icon trash"></i></div>
                </div>
            </div>
            <div class="content"><a class="name" href="">按钮</a>

                <p>基础组件，看图知义，已经不知道怎么解释这类组件。</p></div>
        </div>
        <div class="item">
            <div class="image">
                <div class="ui horizontal divider"><i class="github icon"></i></div>
            </div>
            <div class="content"><a class="name" href="">分隔条</a>

                <p>用来分开展现两组界面。也是基础组件，看图知义。</p></div>
        </div>
        <div class="item">
            <div class="image"><h2 class="ui red block header">第二部分</h2></div>
            <div class="content"><a class="name" href="">标题头</a>

                <p>用来简短的描述内容的主题。</p></div>
        </div>
        <div class="item">
            <div class="image">
                <div class="ui green red progress">
                    <div class="bar"></div>
                </div>
            </div>
            <div class="content"><a class="name" href="elements/progress.html">进度条</a>

                <p>进来展现任务进度，所有的操作系统都有该控件。你可以用来显示文件上传进度等。</p></div>
        </div>
        <div class="item">
            <div class="image">
                <div class="ui inverted piled segment"> 这是由爱酷学习网翻译并校对的Semantic UI中文网，非常感谢jack lukic为我们提供了如此强大如此易用的前端框架。爱酷学习网是用Bootstrap制作的，事实上，如果我早一点知道有Semantic UI这个框架，我想我应用会使用Semantic UI来完成爱酷学习网的前端页面。</div>
            </div>
        </div>
    </div>
</div>
<script>  $('.ui.dropdown').dropdown();  </script>
</body>
</html>